Używam odtwarzacza Video.js do streamowania treści na żywo z mojej lokalnej kamery internetowej (ale myślę, że to nie powinno mieć znaczenia w takim przypadku, może to być dowolny strumień na żywo z sieci). Napisałem bardzo prosty kod:Wideo.js z transmisją na żywo pokazuje się tylko przy ustawieniu autoplay na wartość true. Czy mogę zrobić to po kliknięciu przycisku odtwarzania?
<head>
<link href="video-js.css" rel="stylesheet">
<script src="http://www.andy-howard.com/js/libs/jquery-1.8.2.min.js"></script>
<script src="http://vjs.zencdn.net/c/video.js"></script>
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
</style>
</head>
<body>
<video id="video1" class="video-js vjs-default-skin" width="640" height="480" controls="controls"
preload="auto" data-setup='{}' autoplay="true" >
<source src="http://10.172.180.31:8090/live.flv" type="video/x-flv">
</video>
</body>
a teraz w tej konfiguracji widzę zawartość strumienia, ale istnieje kilka błędów:
1) Nie widzę formantów (aby wstrzymać strumień)
2) Strumień wygląda tak, jak this, więc wideo nie jest przeskalowane do pełnego rozmiaru komponentu. ALE (i to jest naprawdę interesujące), gdy zmieniam rozmiar elementów na stronie (np. W przeglądarce Chrome, trzymając kontrolę i przewijając kółko myszy) na 110%, to wideo wypełnia cały komponent. Wygląda jak błąd w pliku video.js, czy może moja implementacja jest zła?
3) po usunięciu parametru autoplay="true" - nic się nie wyświetla, sterowanie i wideo zniknęły i nie można go odtworzyć.
4) Chciałem usunąć autoplay="true", ale dodanie informacji o plakacie przez dodanie poster="http://upload.wikimedia.org/wikipedia/commons/thumb/4/41/NYC_Times_Square_wide_angle.jpg/640px-NYC_Times_Square_wide_angle.jpg" - nic się nie zmieniło, strumień nie jest widoczny, brak elementów sterujących.
5) kiedy usunąć parametr data-setup i zostawić to tak: <video id="video1" class="video-js vjs-default-skin" width="640" height="480" controls="controls" preload="auto" poster="http://upload.wikimedia.org/wikipedia/commons/thumb/4/41/NYC_Times_Square_wide_angle.jpg/640px-NYC_Times_Square_wide_angle.jpg" > następnie kontrole i plakat są widoczne (co jest świetne), ale przycisk play jest wyszarzona i nie da się grać mój strumień!.
Chcę uzyskać efekt, który po załadowaniu strony widzę obraz plakatu z przyciskiem odtwarzania, a kiedy go klikam - zobaczę odpowiednio zmieniony strumień. czego mi brakuje? Dzięki!