1.HTML頁面中視頻播放支持方法一

觸發代碼： <a href="javascript:void(0)" class="act-video" onclick="playVideo('e01608xXXX')"><strong class="hide">視頻</strong></a> //'e01608xXXX' 視頻ID彈出框代碼： <article class="mod-game-dialog cus-dialog-video hide" id="video"><div class="mod-game-dialog-content"><div class="mod-wrap"><div class="mod-content"><div class="mod-txt"><div class="v1"><div class="video_player"></div></div> <a href="javascript:void(0)" class="close" style="z-index: 9;"><strong class="hide">關閉</strong></a></div></div></article> 加載組件： <script type="text/javascript" src="http://imgcache.qq.com/tencentvideo_v1/tvp/js/tvp.player_v2_zepto.js"></script>使用方法：function playVideo(vid) {$('#video').removeClass('hide').addClass('show');var player_content = $('.video_player'),$b,cid = 'video_player' + (+new Date);if(!player_content) return;$b = $('#video').find('.mod-txt');player_content.attr('id', cid);var video = new tvp.VideoInfo(),config;window.player =new tvp.Player();video.setVid(vid);config = {width: $b.width(),height: 200,video: video,modId: cid,isHtml5UseFakeFullScreen: false,vodFlashSkin: 'http://imgcache.qq.com/minivideo_v1/vd/res/skins/TencentPlayerMiniSkin.swf',autoplay: true, //自動播放選項isShowDurationLimit : false,oninited : function(){$('.tvp_overlay_loading', player_content).addClass('tvp_none');$('.tvp_overlay_play', player_content).removeClass('tvp_none');}}if(/ mi /.test(navigator.userAgent.toLowerCase())){ //小米手機特殊處理config.playerType = 'html5';}window.player.create(config);}關閉視頻： $(".close").click(function(){window.player.pause();$(this).parent().parent().parent().removeClass("show").addClass("hide"); });

2.方法二

加載組件： <script src="http://qzs.qq.com/tencentvideo_v1/js/tvp/tvp.player.js" charset="utf-8"></script>調用方法：var video = new tvp.VideoInfo();video.setVid("j0158oej1lt");//視頻vidvar player = new tvp.Player(320, 190);//視頻高寬player.setCurVideo(video);player.addParam("autoplay","0");//是否自動播放，1為自動播放，0為不自動播放player.addParam("wmode","opaque");player.addParam("pic","http://ossweb-img.qq.com/images/chanpin/moba/public/a20150716qmcsQ/video.jpg");//默認圖片地址player.addParam("flashskin", "http://imgcache.qq.com/minivideo_v1/vd/res/skins/TencentPlayerMiniSkin.swf");//是否調用精簡皮膚，不使用則刪掉此行代碼player.write("videoCon");$("body").on("tap", ".videoBtn", function() {$("#dialogVideo").show(); }); $("body").on("tap", ".videoClose", function() {player.pause();$("#dialogVideo").hide(); }); 觸發事件 <a class="videoBtn" href="javascript:;"></a><!--視頻 彈窗--> <div class="dialogVideo none" id="dialogVideo"><a class="videoClose " href="javascript:;"></a><div id="videoCon" class="video"></div> </div>

總結

以上是生活随笔為你收集整理的JS视频播放的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。