网站Web flash播放器 Video js使用教程

2023年5月15日 194次阅读 来源: 编程狂热者

Video js下载地址：http://www.videojs.com/downloads/video-js-4.4.3.zip

包含video js文件 在播放页面
CDN Version<link href=“//vjs.zencdn.net/4.4/video-js.css” rel=“stylesheet”><script src=“//vjs.zencdn.net/4.4/video.js”></script>
自己本地的目录
<link href=“//example.com/path/to/video-js.css” rel=“stylesheet”><script src=“//example.com/path/to/video.js”></script><script>  videojs.options.flash.swf = “http://example.com/path/to/video-js.swf”</script>
写html标签播放影片
<video id=“example_video_1” class=“video-js vjs-default-skin”  controls preload=“auto” width=“640” height=“264”  poster=“http://video-js.zencoder.com/oceans-clip.png”> <source src=“http://video-js.zencoder.com/oceans-clip.mp4” type=‘video/mp4’ /> <source src=“http://video-js.zencoder.com/oceans-clip.webm” type=‘video/webm’ /> <source src=“http://video-js.zencoder.com/oceans-clip.ogv” type=‘video/ogg’ /></video>
设置video js 播放器参数
这段视频。js嵌入代码仅仅是一个HTML5视频标签,所以对于许多选项可以使用标准的标签属性设置选项。
<video controls autoplay preload=“auto” …>

或者,您可以使用data-setup属性提供以JSON格式选项。这也是如何设置选项,不标准的视频标记。

<video data-setup=‘{ “controls”: true, “autoplay”: false, “preload”: “auto” }’…>

最后,如果你不使用data-setup属性引发玩家的设置,您可以传递一个对象与玩家选择javascript中的第二个参数设置功能。

videojs(“example_video_1”, { “controls”: true, “autoplay”: false, “preload”: “auto” });

个人的选择

注意视频标签属性

HTML5视频标记属性,只能真或假(布尔),您只需包括属性(没有等号)打开,或者排除它关机。例如,将控制:

错误

<video controls=“true” …>

正确

<video controls …>

人们遇到的最大问题是试图设置这些值为false使用假的值(如控制=“false”)实际上是相反的,设置属性的值为true因为仍然是包括在内。如果你需要的属性包含一个等号XHTML验证,您可以设置的属性的值和它的名字一样(如控制=“控制”)。

控制

控制选项设置是否玩家控制,用户可以与之交互。没有控制的唯一途径开始播放的视频播放属性或通过API。

<video controls …>or{ “controls”: true }

自动播放

如果播放是真的,就会开始播放视频页面加载(没有任何用户交互)。不支持的苹果iOS设备。苹果块自动播放功能,以保护它的客户从使用他们的很多不情愿地(通常是昂贵的)月度数据计划。需要用户触摸/点击开始在这种情况下的视频。

<video autoplay …>or{ “autoplay”: true }

预加载

预加载属性告诉浏览器视频数据是否应该开始下载只要视频加载标记。选择汽车、元数据和没有。

“汽车”:立即开始加载视频(如果浏览器同意)。一些移动设备如iphone和ipad不会预加载视频为了保护其用户的带宽。这就是为什么称为“汽车”的价值,而不是更多的东西最终像“真正的”。

“元数据”:只加载视频的元数据,包括信息,如视频的时间和维度。

“没有”:不要预加载任何视频数据。这将等到用户点击开始下载。

<video preload …>or{ “preload”: “auto” }

海报

海报属性集的图像显示在视频开始前玩耍。这通常是一个框架的视频或自定义标题屏幕。当用户单击图像就会消失。

video poster=“myPoster.jpg” …>or{ “poster”: “myPoster.jpg” }

循环

循环属性使视频重新开始就结束。这可以用于视觉影响像云在后台。

<video loop …>or{ “loop”: “true” }

宽度

宽度属性集视频的显示宽度。

<video width=“640” …>or{ “width”: 640 }

高度

高度属性设置显示视频的高度。

<video height=“480” …>or{ “height”: 480 }
Video js  API函数的使用
videojs(“example_video_1”).ready(function(){  var myPlayer = this;  // EXAMPLE: Start playing the video.  myPlayer.play();});

// setting a property on a bare HTML5 video elementmyVideoElement.currentTime = “120”;// setting a property on a Video.js playermyPlayer.currentTime(120);

事件监听；
只监听一次：
one( type, fn )

Add an event listener to be triggered only once and then removed

PARAMETERS:

  • type String Event type
  • fn Function Event listener

RETURNS:

  • vjs.Component

myPlayer.one(‘play’,function(){
//do something
});

每次都监听：
myPlayer.on(‘pause’,function(){
// do something
});

事件列表
EVENTS

durationchange
ended
error
firstplay
fullscreenchange
loadedalldata
loadeddata
loadedmetadata
loadstart
pause
play
progress
timeupdate
volumechange
resize 

 

转自：

网站Web flash播放器 Video js使用教程
http://www.hacktea8.com/thread-9617-1-1.html
(出处: 鸿鹄IT网络学院)

    原文作者：编程狂热者
    原文地址: https://www.cnblogs.com/zhongbin/p/3586950.html
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞