{"id":6206,"date":"2017-11-29T09:20:28","date_gmt":"2017-11-29T01:20:28","guid":{"rendered":"https:\/\/sdeno.com:80\/?p=6206"},"modified":"2020-03-31T20:40:05","modified_gmt":"2020-03-31T12:40:05","slug":"js%e8%a7%86%e9%a2%91%e6%92%ad%e6%94%be%e5%99%a8-video-js","status":"publish","type":"post","link":"https:\/\/sdeno.com\/?p=6206","title":{"rendered":"js\u89c6\u9891\u64ad\u653e\u5668\u2014\u2014video.js"},"content":{"rendered":"

js \u624b\u673a \u89c6\u9891 js \u517c\u5bb9<\/p>\n

\u89c6\u9891\u64ad\u653e\u5668\u5728\u4e0d\u652f\u6301video\u6807\u7b7e\u5c31\u81ea\u52a8\u4f7f\u7528flash\uff0c\u8fbe\u5230\u517c\u5bb9ie8\u6548\u679c\uff1a<\/p>\n

http:\/\/videojs.com\/getting-started\/<\/a><\/p>\n

<\/div>
<\/div><\/div><\/div>\"https:\/\/sdeno.com\/wp-content\/uploads\/2017\/11\/WX20171129-092111.png\"<\/figure>\n

https:\/\/sdeno.com\/wp-content\/uploads\/2020\/02\/videojs.zip<\/a><\/p>\n

 <\/p>\n

\u81ea\u9002\u5e94<\/span><\/p>\n

var player = videojs('video', { fluid: true }, function () {   \/\/id=\"video\"\r\n console.log('Good to go!');\r\n this.play(); \/\/ if you don't trust autoplay for some reason \r\n})<\/pre>\n
 <\/p>\n
\u5f00\u59cb\uff0c\u6682\u505c\uff0c\u7ed3\u675f<\/span><\/p>\n
<video  id=\"example_video_1\" class=\"video-js vjs-big-play-centered vjs-default-skin\" controls preload=\"none\" data-setup=\"{}\">\r\n\r\n<\/video>\r\nvar player = videojs('video', {\r\n         width:1000,\/\/\u5bbdstring|number\r\n         height:450,\/\/\u9ad8\uff1astring|number\r\n         controls:true,\/\/\u63a7\u5236\u6761\uff1aboolean\r\n         preload:\"none\",\/\/\u9884\u52a0\u8f7d\uff1astring\uff1b'auto'|'true'|'metadata'|'none'\r\n         poster:'source\/suoluetu.jpg',\/\/\u9884\u89c8\u56fe\uff1astring\r\n         autoplay:false,\/\/\u81ea\u52a8\u64ad\u653e\uff1aboolean\r\n         loop:true,\/\/\u5faa\u73af\uff1aboolean\r\n         muted:true,\/\/\u9759\u97f3\uff1aboolean\r\n         sources:[\r\n             {\r\n                 src:'source\/test.mp4',\r\n                 type:'video\/mp4'\r\n             }\r\n         ],\r\n         controlBar: {\r\n             muteToggle: false,\r\n             volumeMenuButton:false\/\/\u9759\u97f3\u6309\u94ae\r\n         }\r\n }, function () {\r\n   console.log('Good to go!');\r\n   \/\/this.play(); \/\/ if you don't trust autoplay for some reason\r\n   player.src('http:\/\/www.xx.com\/1.mp4');  \/\/\u52a8\u6001\u52a0\u8f7d\u89c6\u9891\r\n   this.on('ended',function(){\r\n        \/\/\u64ad\u653e\u7ed3\u675f\u540e\u56de\u8c03\r\n   });\r\n });\r\n player.on('play', function () {\r\n console.log('\u5f00\u59cb\/\u6062\u590d\u64ad\u653e');\r\n });\r\n player.on('pause', function () {\r\n console.log('\u6682\u505c\u64ad\u653e');\r\n });\r\n player.on('ended', function () {\r\n console.log('\u7ed3\u675f\u64ad\u653e');\r\n });<\/pre>\n
 <\/p>\n
 <\/p>\n
\u66f4\u65b0\u4e8b\u4ef6<\/span><\/p>\n
player.on('timeupdate', function() {\r\n console.log(player.currentTime());\r\n});<\/pre>\n
 <\/p>\n
 <\/p>\n
\u5224\u65ad\u5f53\u524d\u65f6\u95f4\u548c\u603b\u65f6\u95f4\u662f\u5426\u76f8\u7b49\u6765\u5224\u65ad\u89c6\u9891\u662f\u5426\u7ed3\u675f\uff1a<\/span><\/p>\n
player.on('timeupdate', function () { \r\n \/\/ \u5982\u679c currentTime() === duration()\uff0c\u5219\u89c6\u9891\u5df2\u64ad\u653e\u5b8c\u6bd5\r\n if (player.duration() != 0 && player.currentTime() === player.duration()) {\r\n \/\/ \u64ad\u653e\u7ed3\u675f\r\n }\r\n});<\/pre>\n
 <\/p>\n
 <\/p>\n
iis MIME\u89c6\u9891\u683c\u5f0f\u8bbe\u7f6e\uff1a<\/span><\/p>\n
\u9ed8\u8ba4\u7684iis MIME\u8bbe\u7f6e\u662f\u6ca1\u6709\u589e\u52a0mp4\u7c7b\u578b\u7684\uff0c\u4f1a\u51fa\u73b0\u672c\u5730\u64ad\u653e\u6ca1\u6709\u95ee\u9898\uff0c\u4f46\u662f\u5230\u4e86\u670d\u52a1\u5668\u4e0a\u5c31\u51fa404\u9519\u8bef\u3002\u8fd9\u9700\u8981\u5728iis\u4e2d\u8bbe\u7f6eMIME\uff1a<\/p>\n
<\/div>
<\/div><\/div><\/div>\"https:\/\/sdeno.com\/wp-content\/uploads\/2017\/11\/417688-20160825204823569-2032005671.png\"<\/figure>\n
 <\/p>\n
 <\/p>\n
\u5e38\u89c1\u89c6\u9891\u683c\u5f0f\uff1a<\/span><\/p>\n
flv\u683c\u5f0f\u662f\u52a0\u5165\u5173\u8054\u6269\u5c55\u540d\uff1a.flv\uff0c\u5185\u5bb9\u7c7b\u578b\uff1aapplication\/octet-stream
\nf4v\u683c\u5f0f\u662f\u6269\u5c55\u540d\uff1a.f4v\uff0c\u5185\u5bb9\u7c7b\u578b\uff1aapplication\/octet-stream
\nmp4\u683c\u5f0f\u662f\u6269\u5c55\u540d\uff1a.mp4\uff0c\u5185\u5bb9\u7c7b\u578b\uff1avideo\/mp4
\nogv\u683c\u5f0f\u662f\u6269\u5c55\u540d\uff1a.ogv \uff0c\u5185\u5bb9\u7c7b\u578b\uff1avideo\/ogg
\nwebm\u683c\u5f0f\u662f\u6269\u5c55\u540d\uff1a.webm\uff0c\u5185\u5bb9\u7c7b\u578b\uff1avideo\/webm
\n\u8bbe\u7f6e\u5b8c\u91cd\u542fiis\u624d\u80fd\u751f\u6548\u3002<\/p>\n
 <\/p>\n
 <\/p>\n
\u8bbe\u7f6e\u9ed8\u8ba4\u4f7f\u7528html5\u8fd8\u662fflash\u6280\u672f\u4f18\u5148\u7ea7\uff1a<\/span><\/p>\n
\bvideo.js\u9ed8\u8ba4\u4f1a\u4f7f\u7528html5\u6280\u672f\u4f18\u5148\uff0c\u4f46\u6211\u4eec\u53ef\u4ee5\u8bbe\u7f6e\u4e3aflash\u4f18\u5148\uff0c\u5982\uff1a<\/p>\n
<video data-setup='{\"techOrder\": [\"flash\", \"html5\", \"other supported tech\"]}'<\/pre>\n
\u6216\u8005<\/p>\n
videojs(\"videoID\", {\r\n techOrder: [\"flash\", \"html5\", \"other supported tech\"]\r\n});<\/pre>\n
 <\/p>\n
 <\/p>\n
\u81ea\u52a8\u64ad\u653e\uff1a<\/span><\/p>\n
<video id=\"video\" autoplay> <\/video><\/pre>\n
\u6216\u8005<\/p>\n
var player = videojs('video', { autoplay:true }, function () {\r\n console.log('Good to go!');\r\n \/\/this.play(); \/\/ \u4fdd\u9669\u4f60\u8fd8\u53ef\u4ee5\u4e3b\u52a8\u8c03\u7528play()\r\n});<\/pre>\n
 <\/p>\n
 <\/p>\n
\u6dfb\u52a0\u81ea\u5b9a\u4e49\u65b9\u6cd5\uff1a<\/span><\/p>\n
\/\/\u5b9a\u4e49\u4e00\u4e2a\u63d2\u4ef6\r\n        function examplePlugin(options) {\r\n            this.on('play', function (e) {\r\n                console.log('playback has started!');\r\n            });\r\n        }\r\n\r\n        \/\/\u6ce8\u518c\r\n        videojs.plugin('examplePlugin', examplePlugin);\r\n        \/\/ \u4f7f\u7528\r\n        player.examplePlugin({ exampleOption: true });<\/pre>\n
 <\/p>\n
\u63d2\u4ef6\u5185\u90e8\u53ef\u4ee5\u76f4\u63a5\u8c03\u7528\u64ad\u653e\u5668\u7684api\u3002 \u6709\u4e00\u6b3eplaylist\u7684\u63d2\u4ef6\u53ef\u4ee5\u7814\u7a76\u4e0b\uff0c\u5982\u8fc7\u4f60\u9700\u8981\u64ad\u653e\u5217\u8868\u3002https:\/\/github.com\/brightcove\/videojs-playlist \u4ee5\u53ca http:\/\/videojs.com\/advanced\/ \u6709\u8fd9\u6837\u7684\u6548\u679c\uff1a<\/p>\n
<\/div>
<\/div><\/div><\/div>\"https:\/\/sdeno.com\/wp-content\/uploads\/2017\/11\/417688-20160827091732694-1704245595.gif\"<\/figure>\n
 <\/p>\n
 <\/p>\n
\u5b98\u65b9\u6587\u6863\uff1a<\/p>\n
http:\/\/docs.videojs.com\/docs<\/a><\/p>\n
\u53c2\u8003\u535a\u5ba2\uff1a<\/p>\n
http:\/\/www.tuicool.com\/articles\/7jYvQrR<\/p>\n
http:\/\/blog.videojs.com\/Video-js-5-s-fluid-mode-and-playlist-picker\/<\/p>\n
Creating Intrinsic Ratios for Video<\/a><\/p><\/blockquote>\n