videojs / videojs-contrib-hls

HLS library for video.js
http://videojs.github.io/videojs-contrib-hls/
Other
2.84k stars 793 forks source link

loadedmetadata didn't fire and not autoplay when cross origin #1418

Closed Yalhu closed 6 years ago

Yalhu commented 6 years ago

Description

Event loadedmetadata didn't fire when cross origin and I can't get hls API for use. If it is a sepatate page or not cross origin, it is ok and the .m3u8 file can auto play.

I don't know whether loadedmetadata didn't fire or auto play was forbidden by chrome. firefox is ok.

Steps to reproduce

  1. On one page, there is a iframe which is the videojs page and they are cross origin.
  2. If I call video1.play() on chrome console, it will play and fire this event.
  3. If I call video1.setTimeout(function(){video1.play()},3000) on videoready function, there is an error: play() failed because the user didn't interact with the document first. If call video1.play(), there are no effects.

I have alreay set cors: hls

// page.php
<iframe src="live.php"  allowfullscreen="true"></iframe>
// live.php
<video crossorigin="anonymous"  playsinline width="100%" height="100%" controls id="Video1" class="video-js vjs-default-skin">
        Not support html5 video
</video>
             video1 = videojs('Video1', {
            controlBar:{
                fullscreenToggle:false
            },
            bigPlayButton:false,
        }, videoready);

        video1.on('loadedmetadata',function(){
            console.log('video1 on loaded meta data'); // no log
            var hls = video1.tech({ IWillNotUseThisInPlugins: true }).hls;
            console.log('hls:',hls); // no log
            hls.playlists.on("loadedplaylist", function() {
                console.log('on loaded play list'); // no log
            });
                       // other code ... 

        });

Results

Event didn't fire and there are no logs on console. I can get live.m3u8 file all the time. There are voice but just a little time at the beginning after I reload page.

Expected

Event can fire and live can play as a iframe when cross origin.

Error output

no error output.

Additional Information

I update the latest chrome ,it happened.May it help. firefox is ok.

videojs-contrib-hls version

what version of videojs-contrib-hls does this occur with? videojs-contrib-hls 5.14.1 (I test on the latest)

PS: I don't know how to using a API to get version of this plugin.

videojs version

what version of videojs does this occur with? video.js 6.2.8

Browsers

what browsers are affected? please include browser and version for each

Platforms

what platforms are affected? please include operating system and version or device and version for each

Other Plugins

are any other videojs plugins being used on the page? If so, please list them with version below.

Other JavaScript

are you using any other javascript libraries or frameworks on the page? if so please list them below.

forbesjo commented 6 years ago

It looks like you're encountering Chrome's new autoplay restrictions, we have a blog post that details ways for you to deal with these restrictions http://blog.videojs.com/autoplay-best-practices-with-video-js/